<template>
  <view class="home">
    <uni-search-bar v-model="searchData" @confirm="search" @cancel="getData"></uni-search-bar>
    <view class="content">
      <view @click="goDetail(item._id)" class="item" v-for="item in listArr" :key="item._id">
        <view class="text">
          <view class="title">{{item.title}}</view>
          <view class="info">
            <text>{{item.author}}</text>
            <uni-dateformat :date="item.posttime" :threshold="[60000, 3600000]" format="MM-dd"></uni-dateformat>
          </view>
        </view>

        <view class="pic">
          <image v-if="item.picurls && item.picurls.length" mode="aspectFill" :src="item.picurls[0]"></image>
          <image v-else mode="aspectFill" src="../../static/images/nopic.jpg"></image>
        </view>
      </view>
    </view>

    <view v-if="token" class="goAdd" @click="goAdd">
      <uni-icons type="compose" size="30" color="#fff"></uni-icons>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        listArr: [],
        token: '',
        // 搜索关键词
        searchData: ''
      }
    },
    onLoad() {
      this.getData();
    },
    //触底方法
    onReachBottom() {
      this.getData()
    },
    //下拉刷新
    onPullDownRefresh() {
      this.listArr = []
      this.getData();
    },
    onShow() {
      this.token = uni.getStorageSync('token')
    },
    methods: {
      //跳转到详情页
      goDetail(id) {
        uni.navigateTo({
          url: "/pages/detail/detail?id=" + id
        })
      },

      //获取日记列表
      getData() {
        uniCloud.callFunction({
          name: "art_get_all",
          data: {
            skip: this.listArr.length
          }
        }).then(res => {
          this.listArr = [...this.listArr, ...res.result.data]
          uni.stopPullDownRefresh()
        })
      },

      //点击跳转到新增页面
      goAdd() {
        uni.navigateTo({
          url: "/pages/add/add"
        })
      },

      // 搜索事件
      search() {
        uniCloud.callFunction({
          name: "art_search",
          data: {
            value: this.searchData
          }
        }).then(res => {
          this.listArr = res.result.data
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .home {

    .uni-searchbar {
      margin-bottom: -25px;
    }

    .content {
      padding: 30rpx;
      margin-top: 40rpx;

      .item {
        display: flex;
        justify-content: space-between;
        background-color: #fff;
        padding: 20rpx;
        margin-bottom: 10rpx;
        border-bottom: 1rpx solid #eee;
        border-radius: 10rpx;

        .text {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding-right: 20rpx;

          .title {
            font-size: 44rpx;
            color: #333;
            text-align: justify;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
          }

          .info {
            font-size: 28rpx;
            color: #888;

            text {
              padding-right: 20rpx;
            }
          }
        }

        .pic {
          width: 260rpx;
          height: 180rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    .goAdd {
      width: 120rpx;
      height: 120rpx;
      background: #067fcf;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      font-size: 50rpx;
      position: fixed;
      right: 60rpx;
      bottom: 100rpx;
      box-shadow: 0 0 20rpx #067fcf;
    }
  }
</style>
